<template>
  <div class="video_content">
    <div class="tabbar">
      <div class="tabbar_box">
        <div @click="select = 1" :class="select == 1 ? 'active' : ''">视频</div>
        <div @click="select = 2" :class="select == 2 ? 'active' : ''">MV</div>
      </div>
    </div>
    <div>
      <div v-show="isShow">
        <film> </film>
      </div>
      <div v-show="!isShow">
        <latest-mv></latest-mv>
      </div>
    </div>
  </div>
</template>
<script>
import LatestMv from "./Video/LatestMv"
import Film from "./Video/Film"
export default {
  data() {
    return {
      select: 1,
      isShow: true,
    }
  },
  watch: {
    select: function() {
      this.select == 1 ? (this.isShow = true) : (this.isShow = false)
    },
  },
  components: {
    LatestMv,
    Film,
  },
}
</script>
<style lang="scss" scoped>
@import "../../../../static/scss/common.scss";
.video_content {
  padding: 0px 20px;
  width: 100%;
  box-sizing: border-box;
  .tabbar {
    width: 100%;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-content: center;
    height: 54px;
    .tabbar_box {
      display: flex;
      div {
        height: 55px;
        line-height: 55px;
        width: 80px;
        box-sizing: border-box;
        font-weight: 600;
      }
      div:hover {
        cursor: pointer;
      }
      .active {
        color: $primary;
        border-bottom: 2px solid $primary;
      }
    }
  }
}
</style>
